<template>
    <div class='y-nvas'>
        <span @click="() => keyDown(keyType.HOME)">首页</span>
        <span @click="() => keyDown(keyType.BROWSER)">浏览器</span>
    </div>
</template>

<script lang='ts' setup>
enum keyType {
    HOME,
    BROWSER
}
function keyDown(type: keyType) {
    switch (type) {
        case keyType.HOME:
            // window.open("/home","_self");
            location.href = "/"
            // console.log('yztHOME', type);
            break;
        case keyType.BROWSER:
            // window.open("/commUnity");
            // console.log('yztBROWSER', type);
            location.href = "/commUnity";
            break;
    }
}
</script>

<style lang='less' scoped>
.y-nvas {
    color: #EAECEF;

    span {
        &:hover {
            cursor: pointer;
            color: var(--main);
        }
    }
}

span:last-child {
    margin-inline: var(--px);
    margin-left: calc(var(--px) * 0.5);
}
</style>